<template>
  <el-row class="flex-column my-page">
    <el-row class="page-header">
      <el-col :span="12" class="header-left">
        <span>我的客户</span>
      </el-col>
      <el-col :span="12" class="header-right">
        <el-button
          type="primary"
          size="mini"
          icon="el-icon-plus"
          @click="handleAdd"
        >新 增</el-button>
      </el-col>
    </el-row>

    <el-row class="page-container">
      <!-- 高级搜索 -->
      <advancedSearch :advForm="advancedSearchForm" vlo></advancedSearch>
      <!-- 表格 -->
      <instiutionTable
        v-loading="listLoading"
        element-loading-text="正在加载数据..."
        ref="table"
        :statusMap="statusMap"
        :pages="agentInfoTablePages"
        :instiutionTableData="agentInfoTableData"
        :instiutionTableHeader="agentInfoTableHeader"
      ></instiutionTable>
    </el-row>
  </el-row>
</template>

<script lang="ts">
import { Component, Vue, Ref } from 'vue-property-decorator'
import advancedSearch from '@/common/views/advancedSearch/QuickSearch.vue'
import instiutionTable from '@/common/views/institutionTable/institutionTable.vue'
interface InterStatus {
  status: 'normal' | 'stop'
}
@Component({
  name: 'myCustomer',
  components: {
    advancedSearch,
    instiutionTable
  }
})
export default class MyCustomer extends Vue {
  @Ref() private readonly table!: instiutionTable
  private advancedSearchForm = [{}] // 高级搜索表单
  private $router: any
  private $confirm: any
  private $message: any
  private listLoading: boolean = false

  public mounted () {
    console.log('my customer mounted')
    const agentStatusData = [ // 座席状态
      { label: '启用', value: 'start' },
      { label: '停用', value: 'stop' }
    ]
    this.advancedSearchForm = [ // 高级搜索数据
      { name: '客户名称', inputType: 'input' },
      { name: '客户状态', inputType: 'select', selectData: agentStatusData },
      { name: '创建时间', inputType: 'select', selectData: this.editionData },
      { name: '更多筛选', inputType: 'select', selectData: [] }
    ]
  }

  // region 高级搜索相关
  public statusMap = {
    normal: '启用',
    stop: '停用'
  }

  private editionData = [ // 系统版本
    { label: '标准版', value: 'nanmol' },
    { label: '电商版', value: 'EC' }
  ]
  // endregion

  // region 数据表格相关
  private agentInfoTableHeader = [ // header 表头
    { type: 'select' },
    { label: '客户名称', prop: 'name', minWidth: '100', isSort: true, showTooltip: true },
    { label: '性别', prop: 'gender', width: '50' },
    { label: '手机', prop: 'phone', width: '100' },
    { label: '公司名称', prop: 'company', minWidth: '200', showTooltip: true },
    { label: '客户来源', prop: 'source', minWidth: '100', isSort: true },
    { label: '客户状态', prop: 'status', width: '100', isStatus: true, isSort: true },
    { label: '创建时间', prop: 'created_time', width: '120', isSort: true },
    {
      label: '操作',
      width: '130',
      handlers: [
        {
          name: '详情',
          handleFn: (scope: any) => this.handleShowInfo(scope.row)
        },
        {
          name: '编辑',
          handleFn: (scope: any) => this.handleEdit(scope.row)
        },
        {
          name: '删除',
          className: 'text-color tc-danger',
          handleFn: (scope: any) => this.handleDel(scope.row)
        }
      ]
    }
  ]

  private agentInfoTableData = [ // list 数据
    { _id: '9120eu092u1eeer21', name: '方鲁华', gender: '男', phone: '15683344721', company: '容联七陌科技有限公司', source: '网络推广', status: 'normal', created_time: '2020-09-22' },
    { _id: '90ri2109r092i190r', name: '张三', gender: '男', phone: '18923891231', company: '中天王井科技有限公司', source: '官网', status: 'normal', created_time: '2019-12-13' },
    { _id: 'r12rrrr43rw4rw4r4', name: '李四', gender: '女', phone: '18932142144', company: '借款方好科技有限公司', source: '电话销售', status: 'stop', created_time: '2019-10-15' },
    { _id: 'i390i1290dji23jq9', name: '王五', gender: '男', phone: '15238231234', company: '囧而我却科技有限公司', source: '渠道代理', status: 'stop', created_time: '2020-02-08' },
    { _id: 'cnkadsa90f12k9ff2', name: '六六', gender: '女', phone: '13523189032', company: 'kids阿囧科技有限公司', source: '网络推广', status: 'normal', created_time: '2020-09-30' }
  ]

  private handleShowInfo (row: any) { // operate 查看详情
    console.log('row\n', row)
  }

  private handleEdit (row: any) { // operate 编辑某行
    // console.log('row\n', row)
    this.$router.push({
      path: '/index/customer/c_u',
      query: {
        from: 'my',
        _id: row._id
      }
    })
  }

  private handleDel (row: any) { // operate 删除某行
    this.$confirm('该操作将删除该客户的信息，是否确认？', '确认删除客户', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
      iconClass: 'V7_iconfont V7_iconV7tubiao_shanchu danger'
    }).then(() => {
      this.listLoading = true
      this.$message.success('您点击了删除按钮')
      setTimeout(() => {
        this.agentInfoTableData = this.agentInfoTableData.filter(v => v.name !== row.name)
        this.listLoading = false
      }, 500)
    }).catch(e => {
      console.log(e)
    })
  }

  private agentInfoTablePages = { // operate 分页
    current: 1,
    pageSize: 10,
    total: 100
  }
  // endregion

  // 页面全局函数
  public handleAdd () {
    this.$router.push({
      path: '/index/customer/c_u',
      query: {
        from: 'my'
      }
    })
  }
  // endregion
}
</script>

<style lang="stylus" scoped>
  .my-page
    // margin-left 10px
    .page-header
      height 30px
      margin-bottom 20px
      .header-left
        font-size 18px
        font-weight 900
      .header-right
        text-align right
    .page-container
      flex 1
      border-radius 10px
      border 1px solid $border-main
      box-shadow 0px 0px 4px 0px #e0e6f0, 0px 1px 4px 0px #e0e6f0
      margin 0 2px 2px 0
      height calc(100% - 50px)
      padding 10px
</style>
